<template>
	<view class="watchRecordBox">
		<view class="navBox">
			<u-navbar title="观看记录" :autoBack="true" :titleStyle="{fontWeight:'900'}" bgColor="#ffffff">
			</u-navbar>
		</view>
		<image src="../../static/images/recordBg.png" class="recordBg" :style="'top:'+(customBarHeight*2)+'rpx;'">
		</image>
		<view class="topBox" :style="'top:'+(customBarHeight*2)+'rpx;'" v-if="watchRecordList.length>0">
			<view class="editBox" @click="isEdit = !isEdit">
				{{isEdit?'取消':'编辑'}}
			</view>
		</view>
		<scroll-view scroll-y="true" class="scroll-Y watchRecordList"
			:style="'height:'+(pageHeight-(90+customBarHeight))+'px;top:'+(150+(customBarHeight*2))+'rpx;'"
			v-if="watchRecordList.length>0">
			<view class="watchRecordItem" @click="playLive(item)" v-for="(item,index) in watchRecordList" :key="index">
				<view class="selectBox" v-if="isEdit">
					<image src="../../static/images/select.png" class="select" v-if="item.is_select"></image>
					<image src="../../static/images/noSelect.png" class="select" v-else></image>
				</view>
				<image :src="item.live_info.image" class="image"></image>
				<view class="content">
					<view class="itemTop">
						<text class="tag red" v-if="item.live_info.live_status==1">即将开始</text>
						<text class="tag green" v-if="item.live_info.live_status==2">正在直播</text>
						<text class="tag orange" v-if="item.live_info.live_status==3&&item.live_info.replay==''">直播结束</text>
						<text class="tag orange" v-if="item.live_info.live_status==3&&item.live_info.replay!=''">回放</text>
						<text class="name">{{item.live_info.name}}</text>
					</view>
					<view class="itemCenter">
						视频｜{{item.watch_time}}
					</view>
					<view class="itemBottom">
						<image src="../../static/images/people.png" class="icon"></image>
						<view class="people">{{item.live_info.viewers}}观看</view>
					</view>
				</view>
			</view>
			<view class="fillBox" v-if="isEdit"></view>
		</scroll-view>
		<view class="noData" v-else>
			<image src="../../static/images/nodata.png" class="image"></image>
			<view class="text">您暂时还没有观看记录哦～</view>
		</view>
		<view class="bottomBox" v-if="isEdit">
			<view class="selctBox" @click="allSelect">
				<image src="../../static/images/select.png" class="icon" v-if="isAllSelect"></image>
				<image src="../../static/images/noSelect.png" class="icon" v-else></image>
				<view class="label">全选</view>
			</view>
			<view class="deleteBox" @click="deleteWatchHistory">
				<image src="../../static/images/delete.png" class="icon"></image>
				<view class="label" >删除</view>
			</view>
		</view>
	</view>
</template>

<script>
	const app = getApp();
	import {
		watchHistory,
		deleteWatchHistory
	} from "@/api/api.js"
	export default {
		data() {
			return {
				isEdit: false, //是否编辑
				isAllSelect: false, //是否全选
				watchRecordList: [], //观看记录列表
				customBarHeight: Number(44 + app.globalData.statusBar),
				pageHeight: 0,
			}
		},
		onLoad() {
			let that = this
			uni.getSystemInfo({
				success(res) {
					that.pageHeight = Number(res.windowHeight)
				}
			})
			this.watchHistory()
		},

		methods: {
			//全选
			allSelect() {
				this.isAllSelect = !this.isAllSelect
				this.watchRecordList = this.watchRecordList.map(item => {
					return {
						...item,
						is_select: this.isAllSelect,
					}
				})
			},
			//删除观看记录
			deleteWatchHistory() {
				let that = this
				let watchRecordList = this.watchRecordList.filter(item => {
					return item.is_select
				})
				if (watchRecordList.length == 0) {
					return this.$Tips({
						title: '请至少选择一项观看记录进行删除!'
					})
				}
				let ids = watchRecordList.map(item => {
					return item.id
				})
				uni.showModal({
					title: "确认要删除记录吗?",
					success(res) {
						if (res.confirm) {
							deleteWatchHistory({
								id: ids
							}).then(res => {
								that.$Tips({
									title: '删除成功!'
								})
								that.isEdit = false //是否编辑
								that.isAllSelect = false //是否全选
								that.watchHistory()
							})
						}
					}
				})
			},
			//观看记录
			watchHistory() {
				watchHistory().then(res => {
					this.watchRecordList = res.data.map(item => {
						return {
							...item,
							is_select: false,
						}
					})
				})
			},
			//直播播放
			playLive(item) {
				if (!this.isEdit) {
					this.$Tips('/pages/liveDetail/liveDetail?id=' + item.live_id)
				} else {
					item.is_select = !item.is_select
					if (item.is_select == false) {
						this.isAllSelect = false
					}
					let selectWatchRecord = this.watchRecordList.filter(item => {
						return item.is_select
					})
					if (selectWatchRecord.length == this.watchRecordList.length) {
						this.isAllSelect = true
					}
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.fillBox {
		width: 100%;
		height: 108rpx;
		background: #f8f8f8;
	}

	.noData {
		padding-top: 390rpx;
		margin: 0 auto;
		text-align: center;

		.image {
			width: 320rpx;
			height: 320rpx;
		}

		.text {
			font-size: 28rpx;
			color: #B0B0B0;
		}
	}

	.watchRecordBox {
		min-height: 100vh;
		background-color: #f8f8f8;
	}

	.navBox {
		position: relative;
		z-index: 1000;
	}

	.recordBg {
		position: fixed;
		width: 100%;
		height: 230rpx;
	}

	.topBox {
		width: 100%;
		position: fixed;
		top: 160rpx;
		z-index: 300;

		.editBox {
			position: fixed;
			width: 162rpx;
			height: 88rpx;
			background: #FFFFFF;
			border-radius: 24rpx;
			margin-top: 20rpx;
			z-index: 500;
			right: 34rpx;
			text-align: center;
			line-height: 88rpx;
			font-size: 28rpx;
			color: #2F9BFE;
		}
	}



	.watchRecordList {
		position: relative;
		top: 240rpx;

		.watchRecordItem {
			margin: 0 34rpx;
			padding: 24rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			background: #FFFFFF;
			box-shadow: 0rpx 0rpx 4rpx 0rpx rgba(0, 0, 0, 0.04);
			border-radius: 20rpx;
			margin-bottom: 20rpx;

			.selectBox {
				width: 40rpx;
				height: 40rpx;
				margin-right: 20rpx;

				.select {
					width: 100%;
					height: 100%;
				}
			}

			.image {
				width: 224rpx;
				height: 168rpx;
				margin-right: 14rpx;
			}

			.content {
				flex: 1;

				.itemTop {
					color: #FFFFFF;
					font-size: 16rpx;

					.tag {
						padding: 4rpx 6rpx;
						height: 30rpx;
						font-size: 22rpx;
						background: #0CB76C;
						border-radius: 4rpx;
					}

					.green {
						background: #0CB76C;
					}

					.red {
						background: #FB2525;
					}

					.orange {
						background: #EB5C20;
					}

					.name {
						font-weight: bold;
						font-size: 30rpx;
						color: #000000;
						margin-left: 4rpx;
					}
				}

				.itemCenter {
					padding: 8rpx 0 16rpx;
					font-size: 24rpx;
					color: #737373;
				}

				.itemBottom {
					display: flex;
					align-items: center;
					font-size: 24rpx;
					color: #737373;

					.icon {
						width: 24rpx;
						height: 24rpx;
						margin-right: 14rpx;
					}
				}
			}
		}
	}

	.bottomBox {
		position: fixed;
		bottom: 0;
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		box-sizing: border-box;
		padding: 34rpx 36rpx;
		height: 108rpx;
		background: #FFFFFF;
		font-size: 28rpx;

		.icon {
			width: 40rpx;
			height: 40rpx;
			margin-right: 14rpx;
		}

		.selctBox {
			display: flex;
			align-items: center;

		}

		.deleteBox {
			display: flex;
			align-items: center;

			.label {
				color: #EB5D51;
			}
		}
	}
</style>